<template>
	<view>
		<view class="toper flex-row">
			<image src="../../static/icon/timer.png"></image>
			<view>
				<text>23</text>
				小时
				<text>26</text>
				分
				<text>12</text>
				秒后将自动关闭
			</view>
		</view>
		<view class="content">
			<view class="listBox">
				<view class="list">
					<view class="title">金属液悬浮连续铸造近终型余热有助金属液悬浮连续铸造近终型余热有助</view>
					<view class="tagList flex-row">
						<view>铸轧一体</view>
						<view>净精型</view>
					</view>
					<view class="classList">
						<view>成果价值评估需求</view>
						<view>寻求销售渠道合作</view>
						<view>寻求法律维权服务</view>
						<view>寻求法律维权服务</view>
					</view>
					<view class="desc text-ellipsis3">
						本工艺属于冶金行业板材铸造新工艺，当今最先进的金属薄版生产工艺为CSP等工艺当今最先进的金属薄版生产工艺为当今最先进的金属薄版生产工艺为当今最先进的金属薄版生产工艺为当今最先进的金属薄版生产工艺为当今最先进的金属薄版生产工艺为当今最先进的金属薄版生产工艺为，他们都是将金属液体由冷祝他们都是...
					</view>
				</view>
				<view class="priceBox flex-row flex-between">
					<view></view>
					<view class="flex-row">
						<view class="style">合作方式:买断</view>
						<view class="price">
							成交价格:
							<text>￥999</text>
						</view>
					</view>
				</view>
				<view class="statusBox flex-row flex-between">
					<view class="status">待确认</view>
					<view class="flex-row btnGroup"><view class="op" @click="QRchange">确认交易</view></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			QRchange(){
				
			}
		}
	}
</script>

<style scoped lang="scss">
.toper {
	padding: 25upx 20upx;
	font-size: 26upx;
	color: #22222a;
	background: rgba(253, 88, 10, 0.1);
	// justify-content: space-between;
	align-items: center;
	margin-bottom: 20upx;
	text {
		color: #39d214;
	}
	> image {
		width: 26upx;
		height: 26upx;
		margin-right: 12upx;
	}
}
.content {
	.listBox {
		background: #fff;
		padding: 0 30upx 40upx;
		margin-bottom: 20upx;
		.priceBox {
			align-items: center;
			padding: 34upx 0 48upx;
			.style {
				font-size: 30upx;
				color: #66666a;
			}
			.price {
				font-size: 30upx;
				color: #22222a;
				padding-left: 60upx;
				text {
					font-size: 36upx;
					color: #fe590b;
				}
			}
		}
		.statusBox {
			.status {
				font-size: 32upx;
				color: #fe590b;
			}
			.btnGroup {
				> view {
					width: 142upx;
					height: 50upx;
					border: 1px solid rgba(154, 154, 154, 1);
					border-radius: 8upx;
					color: #9a9a9a;
					font-size: 29upx;
					text-align: center;
					line-height: 50upx;
					&.op {
						color: #fe590b;
						border: 1px solid rgba(253, 88, 10, 1);
						margin-left: 20upx;
					}
				}
			}
		}
		.list {
			padding: 30upx 0;
			border-bottom: 1upx solid rgba(238, 238, 238, 1);
			// &:last-child {
			// 	border-bottom: none;
			// }
			.title {
				font-size: 32upx;
				color: #22222a;
				font-weight: bold;
			}
			.tagList {
				padding-top: 23upx;
				padding-bottom: 23upx;
				> view {
					font-size: 22upx;
					color: #fd580a;
					border: 1upx solid #fd580a;
					padding: 5upx 10upx;
					margin-right: 16upx;
					border-radius: 8upx;
				}
			}
			.classList {
				color: #38d214;
				font-size: 26upx;
				// flex-wrap: wrap;
				> view {
					display: inline-flex;
					background: url(../../static/icon/green.png) no-repeat left 13upx;
					background-size: 8upx 8upx;
					padding-left: 20upx;
					margin-right: 37upx;
					padding-bottom: 20upx;
					&:first-child {
						margin-left: 0;
					}
				}
			}
			.desc {
				color: #666666;
				font-size: 28upx;
			}
		}
	}
}
</style>
